<template>
  <div id='note-dialog' v-if='isShow'>
    <div class='target'>
      <div class="title fs-16 fw-400">{{title}}</div>
      <div class="content fs-12">{{dialogDate.content}}</div>
      <div class="bottom-button fs-14 fw-400">
        <div class="btn-close" @click="handleClose">关闭</div>
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'NDialog'
}
</script>
 
<script setup lang='ts'>
import {onMounted, reactive} from 'vue'
interface DialogProps {
  isShow: boolean;
  title?: string;
  content?: string;
  close?: () => void;
  confirm?: () => void;
}

// 弹窗组件接受数据porps
const props = withDefaults(defineProps<DialogProps>(), {
  isShow: true,
  title: '提示弹窗',
  content: '默认文本',
  close: () => {
    console.log('触发默认关闭回调')
  }
})

const emit = defineEmits(['close'])

const handleClose = () => {
  // emit close事件
  emit('close')
}

// 创建弹窗使用到的数据
const dialogDate = reactive({
  content: props.content
})

// 生命周期钩子 - onMounted
onMounted(() => {
  dialogDate.content = props.content.replace(/^\s*|\s*$/g, '')  
})
</script>

<style scoped lang='less'>
#note-dialog {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  .target {
    position: relative;
    padding-bottom: 30px;
    box-sizing: border-box;
    width: 70%;
    min-height: 150px;
    background-color: #fff;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, .1);
    border-radius: 15px;
    // margin-bottom: 30px;
    overflow: hidden;
    .title {
      width: 100%;
      height: 30px;
      border-bottom: 1px solid #efefef;
      text-align: center;
      line-height: 30px;
    }
    .content {
      width: 100%;
      min-height: 30px;
      padding: 8px 5px;
      box-sizing: border-box;
      text-indent: 1em;
    }
    .bottom-button {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 30px;
      display: flex;
      justify-content: flex-end;
      .btn-close {
        height: 100%;
        // width: 100%;
        flex: 1;
        color: white;
        background-color: #ff7f50;
        text-align: center;
        line-height: 30px;
      }
    }
  }
}
</style>